<template>
	<view class="song_top">
		<view class="left">
			<i class="iconfont" @click="back">&#xe617;</i>
		</view>
		<scroll-view :scroll-left="scrollLeft" 
								 show-scrollbar="false"
								 scroll-x="true" 
								 class="scroll-X"
								 @scrolltolower="lower"
								 @scroll="scrolling">
								 
			<p>{{titleC}}</p>
		</scroll-view>
		
		
	</view>
</template>
 
<script>
	export default {
		name: '',
		props: {
			title: {
				type: String,
				default: ""
			}
		},
		data(){
			return {
				titleC: "",
				scrollLeft: 0,
				timer: null
			}
		},
		created() {
			if(this.title.length > 10) {
				this.titleC = new Array(100).join(this.title+"\xa0\xa0\xa0\xa0")
			} else {
				this.titleC = this.title
			}
		},
		methods:{
			back() {
				uni.navigateBack({
				})
			},
			scrolling(e) {
				// this.scrollLeft = e.detail.scrollLeft
			},
			scroll() {
				//持续改变滚动位置
				//scrollLeft的总长度是确定的
				this.scrollLeft = this.scrollLeft + .5
			},
			lower() {
				//滑到最底部时触发
				// console.log("触发")
				// this.titleC = this.titleC.slice(1) + this.titleC.slice(0,1)
			}
		},
		mounted() {
			//挂载时触发
			this.timer = setInterval(this.scroll, 50)
		},
		beforeDestroy() {
			clearInterval(this.timer)
		}
	}
</script>
 
<style lang="less" scoped>
	.song_top {
		display: flex;
		height: 49px;
		line-height: 49px;
		font-size: 30upx;
		.left {
			width: 33%;
			i {
				font-size: 50upx;
				padding-left: 20upx;
			}
		}
		p {
			text-align: center;
			// overflow: hidden;
			// text-overflow: ellipsis;
			white-space: nowrap;
		}
		border-bottom: 1px solid #eee;
	}
	.scroll-X {
		width: 34%;
	}
</style>
